﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=1">
    <meta name="format-detection" content="telephone=no">
    <meta charset="UTF-8">
    <title>6-5 toRef 以及 context 参数-emit的使用3</title>
    <link rel="stylesheet" href="../../css/bootstrap.css"/>
    <script src="../../js/jquery-2.2.0.min.js"></script>
    <script src="../../js/bootstrap.min.js"></script>
</head>
<body>
<h1>6-5 toRef 以及 context 参数-emit的使用3</h1>

<div id="app">
</div>
<script src="../../js/vue-3.2.26.js"></script>
<script src="../../node_modules/axios/dist/axios.js"></script>
<script src="../../node_modules/lodash/lodash.js"></script>

<script>

    // 引了vue.js会存在一个Vue的全局变量
    const app = Vue.createApp({
        /**
         * CompositionAPI 中 setup函数在created之前，所以在这个函数中的内容没有this
         * method里可以调setup中的方法和使用里面的数据，原因就是它在create之前执行的
         */

        template:`
            <child app="我是父组件传递过来的数据" @chuandi="parentMethod" />
        `,

        setup(props,context){
            const parentMethod = params=>{
                alert('parentMethod:'+params);
            };
            return {
                parentMethod
            }
        }
    });
    app.component('child',{
        template:`
            <div @click="handleClick">child</div>
        `,
        setup(props,context){
            const { attrs, emit } = context;
            const handleClick = ()=>{
                alert('handleClick');
                /*
                 * 一新建child组件
                 * 二定义好需要的数据，例如例子里的app，和方法叫chuandi
                 * 三在事件触发的时候例@click的时候执行子组件的handleClick
                 * 四此时执行的emit第一个参数就是chuandi了，第二个参数是传递给父组件的参数
                 * 五父组件使用子组件child，并传递好对应的属性app,和chuandi需要调的父组件的方法parentMethod
                 * 六写parentMethod里的方法体内容,它有个参数，可以用于接收子组件传递过来的参数
                 */
                // emit其实没有太多可说的，跟以前的this.$emit用法一样，只不过vue3里是从context里取
                emit('chuandi',JSON.stringify({name:'kyo',age:29,app:attrs.app}));
            };
            return {
                handleClick
            };
        }
    });
    const vm = app.mount('#app');

</script>

</body>
</html>
